	<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{
			background-color: #F5F5F5;
		}
		*{
			font-size: 12px;
			padding: 0px;
			margin: 0px;
		}
		input{
			outline: none;
		}
			#main {
				width: 850px;
				margin: 0px auto;
			}
			
			#id1 {
				position: absolute;
				width: 850px;
				height: 500px;
				background-color: white;
				margin: 0px auto;
				margin-top: 30px;
			}
			
			.no1 img {
				position: absolute;
				top: 0px;
				left: 48%;
			}
			
			#id1 h1 {
				margin-top: 90px;
				margin-left: 345px;
				font-size: 28px;
			}
			
			.no2 {
				margin-left: 280px;
				width: 332px;
				margin-top: 30px;
			}
			
			.no2 input {
				height: 35px;
				width: 332px;
				outline: none;
			}
			.no2_1{
				position: fixed;
				background-color: white;
				z-index: 1;
			}
			.no2_1 div{
				display: none;
				z-index: 1;
			}
			.no2-1{
				width: 334px;
				border-top: 1px solid#E8E8E8;
				line-height: 26px;
				background-color: #FCDECC;
				color: #EF5B00;
				z-index: 1;
			}
			.no2-1 span{
				margin-left: 10px;
				z-index: 1;
			}
			.no2-2{
				z-index: 1;
				width: 334px;
				border-bottom: 1px solid #E8E8E8;
				line-height: 38px;
				margin-top: 5px;
			}
			.no2-2:hover{
				background-color: #C1C1C1;
			}
			.no2-2 span{
				margin-left: 10px;
			}
			.no2-3{
				z-index: 1;
				width: 334px;
				border-bottom: 1px solid #E8E8E8;
				line-height: 38px;
			}
			.no2-3:hover{
				background-color: #C1C1C1;
			}
			.no2-3 span{
				margin-left: 10px;
				z-index: 1;
			}
			.no3 {
				margin-left: 280px;
				margin-top: 90px;
				display: block;
			}
			
			.no3 input {
				height: 35px;
				width: 332px;
				border: 1px solid#e0e0e0;
				outline: none;
			}
			
			.no4 {
				margin-left: 280px;
				margin-top: 20px;
			}
			
			.no4 input {
				height: 35px;
				width: 166px;
				border: 1px solid#e0e0e0;
				outline: none;
			}
			
			.no5 input {
				margin-left: 280px;
				width: 332px;
				background-color: #FF6700;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border: 1px solid#EA7F37;
				margin-top: 20px;
				color: white;
				font-weight: bold;
				outline: none;
			}
			
			.no6 {
				margin-left: 280px;
				width: 332px;
				font-size: 12px;
				line-height: 20px;
				margin-top: 10px;
				color: #9D9D9D;
			}
			.no6 span{
				color: black;
			}
			p {
				font-size: 12px;
				color: #FF6700;
				margin-bottom: -8px;
				display: none;
			}
			#id2{
				width: 850px;
				position: relative;
				top: 540px;
				color: #868686;
				
			}
			#id2 li{
				float: left;
				list-style-type: none;
				padding: 5px 5px;
			}
			.no7{
				margin-left: 330px;
			}
			.no8{
				clear: both;
				position: relative;
				top: 15px;
				left: 200px;
			}
			#p1{
				width: 130px;height: 18px;
			}
			#p1 img{
				float: left;position: relative;top: 5px;
			}
			#p1 span{
				position: relative;top: 5px;float: right;
			}
		</style>
	</head>
	<body>
		<form onsubmit="return zhuChe()">
			<div id="main">
				<div id="id1">
					<div class="no1">
						<img src="img/milogo.png" />
					</div>
					<h1>注册小米账号</h1>
					<div class="no2">
						<div  style="width: 334px;border: 1px solid #E8E8E8;"class="no2_1">
							<input type="text" name="diqu" id="diqu" value="中国(+86)"readonly="readonly" />
						    <div class="no2-1">
						    	<span class="sp1">常用</span>
						    </div>
						    <div class="no2-2"onclick="fuGei(this)">
						    	<span>中国</span>
						    	<span style="margin-left: 260px;color: #9D9D9D;">+86</span>
						    </div>
						    <div class="no2-3"onclick="fuGei(this)">
						    	<span>中国台湾</span>
						    	<span style="margin-left: 235px;color: #9D9D9D;">+886</span>
						    </div>
                            <div class="no2-3"onclick="fuGei(this)">
						    	<span>中国香港</span>
						    	<span style="margin-left: 235px;color: #9D9D9D;">+852</span>
						    </div>
						    <div class="no2-3"onclick="fuGei(this)">
						    	<span>Brazil</span>
						    	<span style="margin-left: 250px;color: #9D9D9D;">+55</span>
						    </div>
						    <div class="no2-3"onclick="fuGei(this)">
						    	<span>India</span>
						    	<span style="margin-left: 255px;color: #9D9D9D;">+91</span>
						    </div>
						    <div class="no2-3"onclick="fuGei(this)">
						    	<span>Indonesia</span>
						    	<span style="margin-left: 225px;color: #9D9D9D;">+62</span>
						    </div>
						</div>
					</div>
					<div class="no3">
						<input type="text" name="num" id="num" placeholder="请输入手机号码" />
						<p style="width: 100px;height: 18px;"><img src="img/xia.png" align="center"style="float: left;position: relative;top: 5px;" /><span style="position: relative;top: 5px;float: right;">请输入手机号码</span></p>
						<p id="p1"><img src="img/xia.png" align="center" /><span style="position: relative;top: 5px;">请输入11位有效号码</span></p>
					</div>
					<div class="no4">
						<input type="text" name="img" id="img" placeholder="图片验证码" />
						<p style="width: 90px;height: 18px;"><img src="img/xia.png" align="center"style="float: left;position: relative;top: 5px;" /><span style="position: relative;top: 5px;float: right;">请输入验证码</span></p>
					</div>
					<div class="no5">
						<input type="submit" id="s" value="立即注册" />
					</div>
					<div class="no6">
						点击“立即注册”,即表示您同意并愿意遵守小米<span>用户协议</span>和<span>隐私政策</span>
					</div>
				</div>
				<div id="id2">
					<div class="no7">
						<ul>
							<li>简体</li>
							<li>|</li>
							<li>繁体</li>
							<li>|</li>
							<li>English</li>
							<li>|</li>
							<li> 常见问题</li>
						</ul>
					</div>
					<div class="no8">
						小米公司版权所有-京ICP备10046444- <img src="img/ghs.png"/> 京公网安备11010802020134号-京ICP证110507号
					</div>
				</div>
			</div>
		</form>
		<script type="text/javascript">
			var go = true
			var n = document.getElementById("num");
			var i = document.getElementById("img");
            var c = document.getElementById("diqu");
			function zhuChe() {
				var r1=/\d/.test(n.value);
				var r2=/\d{11}/.test(n.value);
				if(!r1) {
					n.parentNode.children[1].style.display = "block";
					return false;
				} else {
					if(r2) {
						document.getElementById("p1").style.display = "none";
						n.parentNode.children[1].style.display = "none";
						go = true;
					}
					else{
						document.getElementById("p1").style.display = "block";
						return false;
					}
				}
				if(i.value == "") {
					i.parentNode.children[1].style.display = "block";
					return false;
				} else {
					i.parentNode.children[1].style.display = "none";
					go = true;
				}
				return go;
			}
			n.addEventListener("blur",function  () {
				n.style.borderColor="#FF6700";
				if (n.value=="") {
					n.parentNode.children[1].style.display = "block";
				} else{
					n.parentNode.children[1].style.display = "none";
				}
			})
			i.addEventListener("blur",function  () {
				i.style.borderColor="#FF6700";
				if (i.value=="") {
					i.parentNode.children[1].style.display = "block";
				} else{
					i.parentNode.children[1].style.display = "none";
				}
			})
			c.addEventListener("click",function  () {
				var div=c.parentNode;
				div.children[1].style.display="block";
				div.children[2].style.display="block";
				div.children[3].style.display="block";
				div.children[4].style.display="block";
				div.children[5].style.display="block";
				div.children[6].style.display="block";
				div.children[7].style.display="block";
			})
			function fuGei (t) {
				var ip=t.parentNode.children[0];
				var v=ip.value=t.children[0].innerHTML+"("+t.children[1].innerHTML+")";
				var div=t.parentNode;
				div.children[1].style.display="none";
				div.children[2].style.display="none";
				div.children[3].style.display="none";
				div.children[4].style.display="none";
				div.children[5].style.display="none";
				div.children[6].style.display="none";
				div.children[7].style.display="none";
			}
		</script>
	</body>
</html>